<template>
  <AppContainer class="w80p">
    <el-row>
      <el-col :span="20">
        <el-form ref="form" :model="form" :rules="rules" label-width="180px">
          <el-card header="店铺设置" class="mb10">
            <el-form-item label="超时付款失败" prop="timeout">
              <el-input
                v-model="form.timeout"
                placeholder="请输入超时付款失败"
              />
            </el-form-item>
            <el-form-item label="网站域名:" prop="storeName">
              <el-input
                v-model="form.storeName"
                type="textarea"
                placeholder="请输入域名,多个前台网站用英文逗号隔开比如:aa.com,bb.com"
              />
              <span class="fc9 fs10 ml10">
                请输入域名,多个前台网站用英文逗号隔开比如:aa.com,bb.com,订单筛选时的查询项
              </span>
            </el-form-item>
          </el-card>
          <el-card header="后台设置">
            <el-form-item label="自动拒绝卡头" prop="refuseCards">
              <el-input
                v-model="form.refuseCards"
                type="textarea"
                placeholder="请输入,多个用英文逗号隔开比如:511332,411403"
              />
              <span class="fc9 fs10 ml10">
                请输入,多个用英文逗号隔开比如:511332,411403
              </span>
            </el-form-item>
            <el-form-item label="自动高亮卡头" prop="highlightCards">
              <el-input
                v-model="form.highlightCards"
                type="textarea"
                placeholder="请输入,多个用英文逗号隔开比如:511332,411403"
              />
              <span class="fc9 fs10 ml10">
                请输入,多个用英文逗号隔开比如:511332,411403
              </span>
            </el-form-item>
            <el-form-item label="文件写入" prop="btFile">
              <el-select
                v-model="form.btFile"
                placeholder="请选择文件写入1写入 0不写入"
              >
                <el-option
                  v-for="dict in dict.type.open_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="后台刷新频率" prop="refreshRate">
              <el-input
                v-model="form.refreshRate"
                placeholder="请输入后台刷新频率"
              />
            </el-form-item>
            <el-form-item label="拒绝重复卡号" prop="repeatRejection">
              <el-select
                v-model="form.repeatRejection"
                placeholder="请选择拒绝重复卡号1是 0否"
              >
                <el-option
                  v-for="dict in dict.type.open_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                />
              </el-select>
              <span class="fc9 fs10 ml10">
                开启时，当卡号重复时，自动拒绝,
                关闭时，允许最多重复2次,2次以上自动拒绝
              </span>
            </el-form-item>
            <el-form-item label="永久显示更多操作按钮" prop="tgOpen">
              <el-switch
                v-model="form.tgOpen"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="是否开启轮询播报" prop="tgMsg">
              <el-switch
                v-model="form.tgMsg"
                active-color="#13ce66"
                active-value="1"
                inactive-value="0"
                inactive-color="#ff4949"
              />
            </el-form-item>

            <el-form-item label="是否开启无人值守" prop="isTor">
              <div class="df-center">
                <el-switch
                  v-model="form.isTor"
                  active-color="#13ce66"
                  :active-value="1"
                  :inactive-value="0"
                  inactive-color="#ff4949"
                />

                <el-form-item v-if="form.isTor === 1" label="默认选项" prop="isTor">
                  <el-select v-model="form.state" placeholder="请选择">
                    <el-option
                      v-for="item in commonOperate"
                      :key="item.status"
                      :label="item.name"
                      :value="item.status"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-form-item>

            <!-- <el-form-item label="卡信息查询" prop="refreshRate">
              <el-input
                v-model="cardNumber"
                @blur="onCheckCard"
                placeholder="请输入卡"
              />
            </el-form-item> -->
          </el-card>
        </el-form>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </AppContainer>
</template>

<script>
import { addDyConfig, updateDyConfig, checkCard } from '@/api/system/dyConfig'
import { mapActions } from 'vuex'

import { commonOperate } from '../dyUserinfo/const'
export default {
  name: 'DyConfig',
  dicts: ['open_status'],
  data() {
    return {
      form: {
        id: 1,
        tgOpen: 0,
        state: '100'
      },
      commonOperate,
      cardNumber: '',
      // 表单校验
      rules: {}
    }
  },
  mounted() {
    this.getAppConfig({ id: 1 }).then((response) => {
      this.form = {
        ...response.data,
        state: +response.data.state
      }
    })
  },
  methods: {
    ...mapActions('app', ['getAppConfig']),
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateDyConfig(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.getAppConfig({ id: 1 })
            })
          } else {
            addDyConfig(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    async onCheckCard() {
      const res = await checkCard({
        cardNumber: this.cardNumber
      })
      console.log(res)
    },
    // getInfo() {
    //   getDyConfig(this.form.id).then((response) => {
    //     this.form = response.data;
    //     this.title = "修改系统配置";
    //   });
    // },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'system/dyConfig/export',
        {
          ...this.queryParams
        },
        `dyConfig_${new Date().getTime()}.xlsx`
      )
    }
  }
}
</script>
